<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>transform 变形--移动 translate</title>
		<style>
			body {
				//参考系
				perspective: 800px;
			}
			div {
				display: inline-block;
				position: relative;
				width: 200px;
				height: 200px;
				margin: 150px;
				transition: .5s;
				background-color: pink;
				text-align: center;
				line-height: 200px;
			}
			.translate:hover {
				transform: translate(50px);
			}
			.translate2:hover {
				transform: translate(50px, 100px);
			}
			.translate3:hover {
				transform: translate(50%);
			}
			.translateX:hover {
				transform: translateX(50px);
			}
			.translateY:hover {
				transform: translateY(50px);
			}
			.translateZ:hover {
				//看不出变化
				transform: translateZ(50px);
			}
			.translate3d:hover {
				/* transform: translateX(50px) translateY(100px) translateZ(200px); */
				/* 简写 */
				transform: translate3d(50px, 100px, 200px);
			}
		</style>
	</head>
	<body>
		<div class="translate">translate(50px)</div>
		<div class="translate2">translate(50px, 100px)</div>
		<div class="translate3">translate(50%)</div>
		<div class="translateX">translateX(50px)</div>
		<div class="translateY">translateY(50px)</div>
		<div class="translateZ">translateZ(50px)</div>
		<div class="translate3d">3D位移</div>
	</body>
</html>
